<template>
  <div class="reply-comment">
    <img
      :src="replyData.commenterImg"
      @click="goToPersonal"
      draggable="false"
    />
    <div class="right">
      <div class="content">
        <span v-if="replyData.replyToUsername !== this.commentHost"
          >{{ replyData.commenterUsername }} 回复
          {{ replyData.replyToUsername }} :
        </span>
        <span v-else>{{ replyData.commenterUsername }} :</span>
        {{ replyData.content }}
      </div>
      <div class="bottom">
        <div class="left">
          <span>{{ formatDate(replyData.createTime) }}</span>
          <span
            @click="likeComment(replyData.id)"
            class="like"
            :class="{ 'active-like': isLike }"
          >
            <svg-icon icon-file-name="like-fill"></svg-icon>
            {{ replyData.likeCount }}
          </span>
          <span
            class="reply"
            :class="{ active: isReplyComment }"
            @click="openOrCloseReply"
          >
            <svg-icon icon-file-name="comment"></svg-icon>
            {{
              isReplyComment
                ? " 收起"
                : !replyData.replyCount
                ? "回复"
                : replyData.replyCount
            }}
          </span>
        </div>
        <div
          class="bottom-right"
          v-if="parseInt(replyData.userId) === parseInt(userId)"
        >
          <el-popconfirm
            title="确认删除这条评论吗？"
            @confirm="deleteComment(replyData.id)"
          >
            <svg-icon slot="reference" icon-file-name="delete-fill"></svg-icon>
          </el-popconfirm>
        </div>
      </div>
      <reply-input
        @comment-blur="closeReply"
        @send-reply-comment="sendReplyComment"
        :replyUsername="replyData.commenterUsername"
        v-if="isReplyComment"
      ></reply-input>
    </div>
  </div>
</template>

<script>
import { getUserId } from "../../../utils/auth";
import ReplyInput from "./ReplyInput.vue";
export default {
  props: {
    replyData: {
      type: Object,
      default: () => ({}),
    },
    commentHost: {
      type: String,
      default: "",
    },
    isLike: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    ReplyInput,
  },
  data() {
    return {
      userId: getUserId(),
      isReplyComment: false,
      // 标志量 ，用于判断是否是失去焦点导致的回复框关闭
      closeReplyFromOutOfFocus: false,
    };
  },
  methods: {
    // 去个人主页
    goToPersonal() {
      const routePath = this.$router.resolve({
        name: "personal",
        params: {
          personalId: this.replyData.userId,
          personalName: this.replyData.commenterUsername,
        },
      }).href;
      // 打开一个新的标签页
      window.open(routePath, "_blank");
    },
    // 点赞评论
    likeComment() {
      this.$emit("like-comment", this.replyData.id);
    },
    // 删除评论
    deleteComment(id) {
      this.$emit("delete-comment", id);
    },
    // 回复评论
    sendReplyComment(comment) {
      // console.log(comment);
      this.$emit("send-reply-comment", comment);
    },
    openOrCloseReply() {
      if (!this.closeReplyFromOutOfFocus) {
        this.isReplyComment = !this.isReplyComment;
      }
    },
    closeReply() {
      this.closeReplyFromOutOfFocus = true;
      this.isReplyComment = false;
      setTimeout(() => {
        if (this.closeReplyFromOutOfFocus) {
          this.closeReplyFromOutOfFocus = false;
        }
      }, 200);
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
  },
};
</script>

<style lang="less" scoped>
.reply-comment {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  img {
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    user-select: none;
  }
  .right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    .content {
      span {
        color: #515767;
      }
      line-height: 25px;
    }
    .bottom {
      font-size: 13px;
      color: #8a919f;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        .like {
          user-select: none;
          display: flex;
          align-items: center;
          gap: 5px;
          cursor: pointer;
          &:hover {
            color: #409eff;
          }
          &.active-like {
            color: #409eff;
          }
        }
        .reply {
          user-select: none;
          display: flex;
          align-items: center;
          gap: 5px;
          cursor: pointer;
          &:hover {
            color: #409eff;
          }
          &.active {
            color: #409eff;
          }
        }
      }
      .bottom-right {
        cursor: pointer;
      }
    }
  }
}
</style>